<template>
  <div class="header">
    <div class="touxiang">
      <div class="item"></div>
    </div>
    <div class="touxianginfo">
      <div>登陆/注册</div>
      <div>暂无手机号绑定</div>
    </div>
    <div class="jiantou">></div>
  </div>
</template>

<script>
export default {
  name: 'ProfileHeader',
  components: {
  },
  data(){
    return {

    }
  },
}
</script>

<style scoped>
  .header {
    width: 100%;
    height: 16%;
    /* background-color: red; */
  }
.touxiang {
  width: 10vh;
  height: 10vh;
  background-color: #eee;
  border-radius: 50%;
  margin-top: 10px;
  margin-left: 10%;
  overflow: hidden;
}
.item {
  width:0;
  height:0;
  border-top:6vh solid #4e4e4e; 
  border-right:6vh solid #2abdc1;
  border-bottom:6vh solid #bb2f2f;
  border-left:6vh solid #5fc783;  
}
.touxianginfo {
  position: absolute;
  left: 20vh;
  top: 12vh;
  font-size: 0.8rem;
}
.touxianginfo div {
  padding-bottom: 4px;
}
.jiantou {
  position: absolute;
  right: 2vh;
  top: 12vh;
}
</style>
